<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Apple(中国)-非官方网站</title>
    <link rel="stylesheet" href="css/semantic.css"media="screen" title="no title" charset="utf-8">
  </head>
  <!-- 小结，此次是自己根据自己所想构造，从上至下，遇到搞不定时，看下参考.html
       从源码中可以看出自己写的很糟糕。还需要下更大的功夫。好在达到了相同的效果。-->
  <body>
    <div class="ui secondary vertical segment">
      <!-- 顶部菜单部分-->
      <!-- 部分ui形容词解析，fixed-固定菜单，nine item menu -将菜单均匀分成九份-->
      <div class="ui inverted fixed basic nine item menu">
        <a href="#" class="item">
          <div class="ui img">
            <img src="images/appleicon.png" alt="appleicon">
          </div>
        </a>
        <a href="#" class="item">Mac</a>
        <a href="#" class="item">ipad</a>
        <a href="#" class="item">iphone</a>
        <a href="#" class="item">Watch</a>
        <a href="#" class="item">Music</a>
        <a href="#" class="item">技术支持</a>
        <a href="#"class="item">
          <div class="ui img">
            <img src="images/searchicon.png" alt="searchicon">
          </div>
        </a>
        <a href="#" class="item">
          <div class="ui img">
            <img src="images/buyicon.png" alt="buyicon">
          </div>
        </a>
      </div>
      <!-- 至此顶部菜单栏结束-->
  <!-- banner部分-->
  <!-- vertical-对齐图像 -->
      <div class="ui vertical basic segment">
        <div class="ui banner img">
          <img src="images/banner.png" alt="banner">
        </div>
      </div>
  <!--banner部分结束-->
  <!--banner下方的四块图片, basic去除边线 secondary没查到，但类似于统一所在区域的背景-->
      <div class="ui secondary basic four item menu segment">
        <div class="item">
          <img class="ui basic img" src="images/img1.png" alt="img1">
        </div>
        <div class="item">
          <img class="ui basic img" src="images/img2.png" alt="img2">
        </div>
        <div class="item">
          <img class="ui basic img" src="images/img3.png" alt="img3">
        </div>
        <div class="item">
          <img class="ui basic img" src="images/img4.png" alt="img4">
        </div>
      </div>
      <div class="ui secondary vertical very padded segment">
          <p>双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。</p>
      </div>
    <!--四张小图至此完毕-->
    <!--footer部分-->
      <div class="ui secondary basic very padded segment">
        <div class="ui vertical basic very padded five column grid segment">
          <div class="column">
            <h4>AppleStore商店</h4>
            <h5>查找零售店</h5>
            <h5>ipad</h5>
            <h5>iphone</h5>
            <h5>Watch</h5>
            <h5>ipod</h5>
          </div>

          <div class="column">
            <h4>AppleStore商店</h4>
            <h5>查找零售店</h5>
            <h5>ipad</h5>
            <h5>iphone</h5>
            <h5>Watch</h5>
            <h5>ipod</h5>
          </div>

          <div class="column">
            <h4>AppleStore商店</h4>
            <h5>查找零售店</h5>
            <h5>ipad</h5>
            <h5>iphone</h5>
            <h5>Watch</h5>
            <h5>ipod</h5>
          </div>

          <div class="column">
            <h4>AppleStore商店</h4>
            <h5>查找零售店</h5>
            <h5>ipad</h5>
            <h5>iphone</h5>
            <h5>Watch</h5>
            <h5>ipod</h5>
          </div>

          <div class="column">
            <h4>AppleStore商店</h4>
            <h5>查找零售店</h5>
            <h5>ipad</h5>
            <h5>iphone</h5>
            <h5>Watch</h5>
            <h5>ipod</h5>
          </div>

        </div>
      </div>
    </div>
  </body>
</html>
